<template>
	<!-- 玉米表单 -->
	<div class="iot-container">
		<!-- <div>玉米</div> -->
		<el-card :body-style="{
        padding: 0,
        margin: 15,
        borderRadius: '10px',
        borderRadius: '14px',
      }" shadow="always">
			<div class="el-form">
				<el-form ref="form" :model="form" label-width="80px">
					<div class="demo" style="padding-left: 25px">
						<!-- 作物种类 -->
						<el-form-item label="作物种类" class="label">
							<el-select v-model="form.plantId" placeholder="请选择作物种类" style="width: 100%">
								<el-option v-for="item in OptionsList" :key="item.plantCode" :label="item.plantName"
									:value="item.plantCode"></el-option>
							</el-select>
						</el-form-item>
						<!-- 作物品种 -->
						<el-form-item label="作物品种" class="label">
							<el-select v-model="form.plantVarieties" placeholder="请选择作物种类" style="width: 100%">
								<el-option v-for="item in VarietiesList" :key="item.plantCode" :label="item.plantName"
									:value="item.plantCode"></el-option>
							</el-select>
						</el-form-item>
					</div>
					<div class="demo">
						<div class="input">
							<!-- 种植方式 -->
							<el-form-item label="种植方式" class="label" style="width: 100%">
								<el-input v-model="form.mode"></el-input>
							</el-form-item>
						</div>
						<div class="input">
							<!-- 种植密度 -->
							<el-form-item label="播种密度" class="label" style="width: 100%">
								<el-input v-model="form.sowingDensity" size="medium"
									placeholder="请输入5000-21000范围内数值（株/亩)"></el-input>
							</el-form-item>
						</div>
					</div>
					<div class="demo">
						<div class="input">
							<!-- 浇灌方式 -->
							<el-form-item label="浇灌方式" class="label" style="width: 100%">
								<el-input v-model="form.irrigationMethod" size="medium"></el-input>
							</el-form-item>
						</div>
						<div class="input">
							<el-form-item label="是否覆膜" class="label" style="width: 100%">
								<el-select v-model="form.isMulching" placeholder="" style="width: 100%">
									<el-option v-for="item in mulchingList" :key="item.plantCode"
										:label="item.plantName" :value="item.plantCode"></el-option>
								</el-select>
							</el-form-item>
						</div>
					</div>
					<div class="demo">
						<div class="input">
							<el-form-item label="播种时间" class="label">
								<el-date-picker v-model="form.sowTime" type="date" placeholder="选择日期"
									style="width: 470px">
								</el-date-picker>
							</el-form-item>
						</div>
						<div class="demo1" style="width: 100%">
							<el-form-item label="是否使用复合肥:" class="label">
								<el-select v-model="form.isFertilizer" placeholder="请选择是否使用">
									<el-option v-for="item in whetherUseList" :key="item.plantCode"
										:label="item.plantName" :value="item.plantCode"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="复合肥类型:" class="label" style="margin-left: 15px">
								<el-select v-model="form.UseType" placeholder="请选择复合肥类型:">
									<el-option v-for="item in UseTypeList" :key="item.id" :label="item.goodName"
										:value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<div style="text-align: center; margin: 20px 0">
				<el-button type="success" @click="preservation()" style="width: 15%">保存</el-button>
			</div>
		</el-card>
	</div>
</template>
<script>
	// import formSelect from "./form-select.vue";
	import {
		addLand,
		fertilizerType,
		CropType
	} from '@/api/farmEvent'
	export default {
		components: {
			// formSelect
		},
		data() {
			return {
				form: {
					ids: [], //地块id 集合
					plantBreedId: '', //物类型id
					plantType: "0", //作物类型
					plantId: '', //作物类型
					plantVarieties: "", //作物品种
					isMulching: "0", //是否覆膜
					isFertilizer: "", //是否使用复合肥
					UseType: "", //使用类型
					mode: "", //种植方式
					sowingDensity: "", //播种密度
					irrigationMethod: "", //灌溉方式
					sowTime: "" //播种时间
				},
				mulchingList: [], //是否覆膜
				OptionsList: [], // 作物种类
				VarietiesList: [], // 作物品种
				whetherUseList: [], //是否使用复合肥
				UseTypeList: [], //复合肥类型
				listParames: {}
			};
		},
		mounted() {
			// 取作物类型id
			this.form.plantBreedId = localStorage.getItem("plantBreedId");
			this.listParames = JSON.parse(localStorage.getItem("listParames"));
			this.form.ids.push(this.listParames.id);
			// this.getPlantList();
			this.getAllTypeList();
			this.getfertilizerList();
		},
		methods: {
			
			 getfertilizerList() {
				 //获取化肥类型
				fertilizerType({
					id: 13,
					string: "farm_good"
				}).then(res=>{
					console.log(res)
					if (res.data.code == 200) {
						this.UseTypeList = res.data.data
					}
				})
				
				//获取种子类型
				  CropType({
					id: 3,
					string: "farm_good"
				}).then(qqq=>{
					console.log(qqq)
					if (qqq.data.code == 200){
						this.VarietiesList = qqq.data.data.data
						
				
					}
					// console.log('123'+ qqq.data.data)
				})
				
			},
						getAllTypeList() {

				// 作物类型
				this.OptionsList = [{
						plantName: "棉花",
						plantCode: "0"
					},
					{
						plantName: "玉米",
						plantCode: "1"
					},
					{
						plantName: "水稻",
						plantCode: "2"
					}
				];
				// 作物品种
				this.VarietiesList = [{
						plantName: "棉花1号",
						plantCode: "0"
					},
					{
						plantName: "棉花2号",
						plantCode: "1"
					},
					{
						plantName: "棉花3号",
						plantCode: "2"
					}
				];
				// 是否覆膜
				this.mulchingList = [{
						plantName: "是",
						plantCode: "0"
					},
					{
						plantName: "否",
						plantCode: "1"
					}
				];
				//是否使用复合肥类型
				this.whetherUseList = [{
						plantName: "是",
						plantCode: "0"
					},
					{
						plantName: "否",
						plantCode: "1"
					}
				];

			},
			// 保存
			async preservation() {
				const response = await addLand(this.form);
				console.log(esponse.data)
				if (response.data.code == 200) {
					// 弹出保存成功弹框
					this.$message({
						type: "success",
						message: response.data.msg
					})
				}
			}
		}
	};
</script>

<style scoped>
	.demo {
		padding: 10px;
		display: flex;
		width: 100%;
	}

	/* .demo_{
  width: 50%;
} */
	.demo1 {
		padding: 0 10px;
		display: flex;
	}

	.input {
		display: flex;
		margin-left: 15px;
		width: 50%;
	}

	.label {
		width: 50%;
		margin-top: 10px;
	}

	/deep/.el-input--small .el-input__icon {
		height: 20px;
	}

	/* /deep/.el-input--small .el-input__inner {
  width: 445px;
  height: 40px;
  margin-left: 20px;
} */
</style>
